<template>
  <div>
    <Header :left="true" leftText="返回" title="用工确认详情" />
    <van-row style="margin-top: 8px">
      <van-col
        ><van-image
          width="40"
          height="30"
          style="margin-left: -10px"
          src="assets/block.png"
      /></van-col>
      <van-col class="message" style="margin-top: 5px">多媒体信息</van-col>
    </van-row>
    <div class="divMedia">
      <van-row style="margin-top: 10px">
        <van-col
          span="3"
          style="
            font-weight: bold;
            color: #a9a9a9;
            margin-left: 10px;
            margin-top: 8px;
          "
          >照片：</van-col
        >
        <van-col span="14" style="color: #a9a9a9"
          ><van-uploader
            v-show="true"
            v-model="photoList"
            :deletable="false"
            multiple
            :max-count="1"
        /></van-col>
      </van-row>
    </div>
    <van-row style="margin-top: 10px">
      <van-col
        ><van-image
          width="40"
          height="30"
          style="margin-left: -10px"
          src="assets/block.png"
      /></van-col>
      <van-col class="message" style="margin-top: 5px">填报信息</van-col>
    </van-row>
    <Field
      v-model="temporarytemployee.workertype"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="用工类型"
    />
    <Field
      v-model="temporarytemployee.planworkdatetime"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="用工日期"
    />
    <Field
      v-model="temporarytemployee.pshiftid"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="班次"
    />
    <Field
      v-model="temporarytemployee.factworksused"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="实际用工人数"
    />
    <Field
      v-model="temporarytemployee.workhour"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="实际用工工时(小时)"
    />
    <Field
      v-model="temporarytemployee.creator"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="创建人"
    />
    <Field
      v-model="temporarytemployee.createdatetime"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="创建时间"
    />
    <Field
      v-model="temporarytemployee.checktor"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="审核人"
    />
    <Field
      v-model="temporarytemployee.checkdatetime"
      size="small"
      style="font-weight: bold; color: #a9a9a9"
      center
      colon
      label="审核时间"
    />
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Col,
  Row,
  Dialog,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Search,
  Sticky,
  Toast,
  Uploader,
  Loading,
} from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Search);
Vue.use(Sticky);
Vue.use(Uploader);
Vue.use(Loading);

import Header from "@/components/header.vue";
import { _httpClient } from "@/libs/api";

export default {
  name: "confirmemployeedetail",
  components: {
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    Col,
    Row,
    Search,
    Sticky,
  },

  data() {
    return {
      id: "",
      temporarytemployee: {},
      screenWidth: 0,
      photoList: [
        //图片
      ],
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.id = api.pageParam.id;
    this.queryFileById(this.id);
  },
  methods: {
    //查询临时用工信息
    async queryFileById(id) {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "查询中...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/manhourfact/confirmlabor/querynotaudititem",
          {
            body: { id: _this.id },
          }
        );
        if (res.code === 200) {
          if (res.rows.length > 0) {
            //筛选信息
            switch (res.rows[0].workertype) {
              case "L001":
                _this.temporarytemployee.workertype = "返工挑选";
                break;
              case "L002":
                _this.temporarytemployee.workertype = "设备临时损坏或停机";
                break;
              case "L003":
                _this.temporarytemployee.workertype = "临时性清洁工作";
                break;
              case "L004":
                _this.temporarytemployee.workertype = "临时离场";
                break;
              case "L005":
                _this.temporarytemployee.workertype = "其他";
                break;
            }
            _this.temporarytemployee.planworkdatetime =
              res.rows[0].planworkdatetime;
            _this.temporarytemployee.pshiftid = res.rows[0].pshiftid;
            _this.temporarytemployee.factworksused = res.rows[0].factworksused;
            _this.temporarytemployee.workhour = res.rows[0].workhour;
            _this.temporarytemployee.creator = res.rows[0].creator;
            _this.temporarytemployee.createdatetime =
              res.rows[0].createdatetime;
            _this.temporarytemployee.checktor = res.rows[0].checktor;
            _this.temporarytemployee.checkdatetime = res.rows[0].checkdatetime;
            let picture = { url: res.rows[0].filesource };
            let pictures = [];
            pictures.push(picture);
            _this.photoList = pictures
            _this.$forceUpdate();
          }
          Toast.clear();
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.clear();
        alert(JSON.stringify(e));
      }
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonLeft {
  position: fixed;
  bottom: 5px;
  right: 10px;
  width: 88px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.message {
  font-size: 20px;
  margin-top: 0px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.divMedia {
  margin-top: 10px;
  height: 100px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
}
.buttonDown {
  position: fixed;
  right: 5px;
  bottom: 20px;
  width: 150px;
  height: 40px;
  font-size: 12px;
}
</style>
